<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加支出</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__TMPL__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__TMPL__/css/admin.css" media="all">
    <script type="text/javascript" src="__TMPL__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__TMPL__/layui/layui.js"></script>
    <script type="text/javascript" src="__TMPL__/js/admin.js"></script>
    <script type="text/javascript" src="__TMPL__/layui/lay/modules/util.js"></script>
    <style>
        html{
            background-color: #ffffff;
        }
        .layui-card{
            box-shadow: 0 0 0 0 #ffffff !important;
        }
        .preview{
            display: inline-block;width: 100px
        }
        .preview img{
            display: block;
        }

    </style>
</head>
<div class="layui-card">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
         style="padding: 20px 30px 0 0;">
        <div class="layui-form-item">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-block">
                <input type="text" name="money" lay-verify="required" value="{$expend.money|default=''}" placeholder="金额" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支出时间</label>
            <div class="layui-input-block">
                <input type="text" name="expend_time" id="expend_time" lay-verify="required" value="{$expend.expend_time|default=''}" placeholder="支出时间" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用途</label>
            <div class="layui-input-block">
                <select name="use_id" lay-filter="required">
                    <option value="">请选择用途</option>
                    <volist name="use_list" id="vo">
                        <option value="{$key}" <eq name="expend.use_id" value="$key">selected</eq>>{$vo}</option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <volist name="department_list" id="voo">
                    <input type="radio" name="department_id" value="{$key}" title="{$voo}" <eq name="expend.department_id" value="$key">checked</eq>>
                </volist>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="employee">{$expend.employee|default='选择员工'}</button>
                <input type="hidden" id="employee_id" name="employee_id" value="{$expend.employee_id|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传凭据</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="img">图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;margin-left: 110px;">
                    <notempty name="expend.img">
                        <volist name="expend.img" id="vo">
                            <div class="preview">
                                <img style="display: block" width="80" height="50" src="{$vo}" class="layui-upload-img">
                                <input type="hidden" name="img[]" value="{$vo}">
                                <button class="layui-btn layui-btn-xs layui-btn-danger" type="button" style="margin-top: 10px;margin-left: 20px" onclick="$(this).parent('.preview').remove()">删除</button>
                            </div>
                        </volist>
                    </notempty>
                </blockquote>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入内容" class="layui-textarea">{$expend.remark|default=''}</textarea>
            </div>
        </div>
        <input type="hidden" name="id" value="{$expend.id|default=0}">
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
        </div>
    </div>
</div>
<script>
    layui.config({
        base: '__TMPL__/public/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form','admin','upload','agentSelect','laydate'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,upload = layui.upload
            ,laydate = layui.laydate;

        laydate.render({
            elem: '#expend_time'
        });
        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field;
            var index = parent.layer.getFrameIndex(window.name);
            admin.req({
                url: "{:url('expend/do_operate')}",
                method:'post',
                type:'json',
                data:field,
                done:function (res) {
                    if(res.code===1){
                        layer.msg(res.msg, {icon: 6}, function(){
                            parent.layui.table.reload('dataTable'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        });
                    }else{
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });
        });

        var tableSelect = layui.agentSelect;
        tableSelect.render({
            elem: '#employee', //定义输入框input对象
            searchKey: 'keyword',   //搜索输入框的name值 默认keyword
            searchPlaceholder: '搜索业务人员', //搜索输入框的提示文字 默认关键词搜索
            table: {    //定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url:"{:url('employee/get_select_list')}",
                cols: [[ //表头
                    {field:'id', title:'选择',type:'radio',  templet: '#check', unresize: true,width:50},
                    {field: 'department', title: '部门'},
                    {field: 'name', title: '员工'}
                ]]
            },
            done: function (elem, data) {
                var id='';
                var name='';
                $('.layui-layer-content').remove();
                $.each(data.data,function(i,n)
                {
                    id=n.id;
                    name = n.name;
                });
                $("#employee").text(name);
                $("#employee_id").val(id);
            }
        });

        upload.render({
            elem: '#img'
            ,url: "{:url('expend/upload')}"
            ,multiple: true
            ,done: function(res){
                if(res.code===1){
                    console.log(res.data.url);
                    $('.layui-elem-quote').append(
                        '<div class="preview">' + '<img width="80" height="50" src="'+ res.data.url +'" class="layui-upload-img">' +
                        '<input type="hidden" name="img[]" value="'+ res.data.url +'">' +
                        '<button class="layui-btn layui-btn-xs layui-btn-danger" type="button" style="margin-top: 10px;margin-left: 20px"  onclick="$(this).parent(\'.preview\').remove()">删除</button></div>');
                }else{
                    layer.msg(res.msg, {icon: 5});
                }
            }
        });
    })
</script>
</body>
</html>